<!-- The ref attr used to find the swiper instance -->
<template>
	<div class="swiper">
		<swiper :options="swiperOption">
		<!-- slides -->
			<swiper-slide v-for="item of list" :key="item.id" v-if="showSwiperList">
				<img class="swiper-img" :src="item.imgUrl" />
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
  
</template>

<script>
  export default {
    name: 'homeSwiper',
		props: {
			list: Array
		},
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
		  loop: true,
        },
      }
    },
		computed:{
			showSwiperList (){
				return this.list.length
			}
		}
  }
</script>
<style scoped lang="stylus">
	@import '~styles/varibles.styl'
	.swiper >>>  .swiper-pagination-bullet-active
	 background #fff
	.swiper 
	 width 100%
	 height 0
	 overflow hidden
	 padding-bottom 30.6%
	 background #f2f2f2
	 .swiper-img 
	  width 100%
	   
</style>